<html>
	<head>
		<title>WebRTC get audio and video devices</title>
	</head>
	<body>
		<h1>Hello World!!</h1>
		<!-- <script src="./js/client.js"></script> -->

		<div >
			<label>audio input device:</label>
			<select id="audioSource"></select>
		</div>
		<div >
			<label>audio output device:</label>
			<select id="audioOutput"></select>
		</div>
		<div >
			<label>video input device:</label>
			<select id="videoSource"></select>
		</div>
	</body>

	<script>
		var audioSource = document.querySelector("select#audioSource");
		var audioOutput = document.querySelector("select#audioOutput");
		var videoSource = document.querySelector("select#videoSource");

		if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
			console.log('enumeratedevice is not supported');
		}else{
			navigator.mediaDevices.enumerateDevices()
			.then(gotDevices)
			.catch(handleError);
		}

		function gotDevices(deviceInfos) {
			deviceInfos.forEach((deviceInfo)=>{
				console.log(deviceInfo);
				var option = document.createElement('option');
				option.text = deviceInfo.label;
				option.value = deviceInfo.deviceId;

				if (deviceInfo.kind === 'audioinput') {
					audioSource.appendChild(option);
				}else if(deviceInfo.kind === 'audiooutput'){
					audioOutput.appendChild(option);

				}else if(deviceInfo.kind === 'videoinput'){
					videoSource.appendChild(option);
				}
			})
		}

		function handleError(error) {
			// body...
		}
	</script>

</html>
